<template>
  <!-- <div class="orderGoods">
    <div class="total">共{{    }}件商品</div>
    <div class="goodWrapper">
      <div
        class="item acea-row row-between-wrapper"
        v-for="cart in cartInfo"
        :key="cart.id"
      >
        <div class="pictrue">
          <img :src="cart.productInfo.image" class="image" />
        </div>
        <div class="text">
          <div class="acea-row row-between-wrapper">
            <div class="name line1">{{ cart.productInfo.store_name }}</div>
            <div class="num">x {{ cart.cart_num }}</div>
          </div>
          <div class="attr line1" v-if="cart.productInfo.attrInfo">
            {{ cart.productInfo.attrInfo.suk }}
          </div>
          <div class="money font-color-red">￥{{ cart.truePrice }}</div>
          <div
            class="evaluate"
            v-if="evaluate === 3"
            @click="$router.push({ path: '/goods_evaluate/' + cart.unique })"
          >
            评价
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <div>
   <div  v-for="cart  in cartInfo"
        :key="cart.id" 
        >
          <div class="info">包裹{{num+1}}</div>
          <div class="thead acea-row row-center-wrapper">
            <div class="t-1">商品信息</div>
            <div class="t-2">单价</div>
            <div class="t-3">数量</div>
            <div class="t-4">小计</div>
            <div class="t-5" v-if="evaluate === 3"></div>
            <div class="t-5" v-else >实付</div>
          </div>
          <div class="table acea-row">
            <div class="t-1 acea-row">
              <div class="image"> <img :src="cart.productInfo.image" class="image" /></div>
              <div class="line1">
                <span>{{ cart.productInfo.store_name }}</span>
                <div v-if="cart.productInfo.attrInfo" style="margin-left: 5px;color: #999;">规格:{{ cart.productInfo.attrInfo.suk }}</div>
              </div>
            </div>
            <div class="t-2"><span>￥{{ cart.truePrice }}</span></div>
            <div class="t-3"><span>{{ cart.cart_num }}</span></div>
            <div class="t-4"><span>￥{{ cart.truePrice*cart.cart_num }}</span></div>
            <div class="t-5"  v-if="evaluate === 3"><span  @click="$router.push({ path: '/goods_evaluate/' + cart.unique })" style=" color: #69c;cursor: pointer;">评价</span></div>
            <div class="t-5"  v-else><span>￥{{ cart.truePrice*cart.cart_num }}</span></div>
          </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "OrderGoods",
  props: {
    evaluate: Number,
    cartInfo: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {
      num:0,
    };
  },
  mounted: function() {},
  methods: {}
};
</script>
<style  scoped>
 
  .info {
    width: 1088px;
    height: 42px;
    background-color: #f8f5f0;
    padding: 0 20px;
    border: 1px solid #E8E8E8;
    line-height: 40px;
    font-size: 14px;
    color: #666;
  }
 .table {
    width: 1088px;
    height: 140px;
    padding:0 21px;
  }
  .table .t-1 {
    width: 356px;
    height: 140px;
    padding: 20px 0;
  }
  .table .t-1 .image {
    width: 100px;
    height: 100px;
  }
  .table .t-1 .image img{
    width: 100%;
    height: 100%;
  }
  .table .t-1 .line1 {
    width: 248px;
  } 
  .table .t-1 .line1 span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 24px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    margin-left: 5px;
  }
  .table .t-2 {
    width: 162px;
    height: 140px;
    padding: 20px 0;
    line-height: 24px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: center;
  }
  .table .t-2 span {
    padding-top: 7px;
  }
  .table .t-3 {
    width: 166px;
    height: 140px;
    padding: 20px 0;
    line-height: 24px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: center;
  }
   .table .t-3 span {
    padding-top: 7px;
  }
  .table .t-4 {
    width: 187px;
    height: 140px;
    padding: 20px 0;
     line-height: 24px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: center;
  }
   .table .t-4 span {
    padding-top: 7px;
  }
  .table .t-5 {
    width: 175px;
    height: 140px;
    padding: 20px 0 ;
    line-height: 24px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: center;
  }
   .table .t-5 span {
    padding-top: 7px;
  }
  .thead {
    width: 1088px;
    height: 42px;
    background-color: #f5f5f5;
    font-size: 14px;
    line-height: 41px;
    color: #999;
  }

  .thead .t-1 {
    width: 356px;
  }
  .thead .t-2 {
    width: 162px;
    text-align: center;
  }
  .thead .t-3 {
    width: 166px;
    text-align: center;
  }
  .thead .t-4 {
    width: 187px;
    text-align: center;
  }
  .thead .t-5 {
    width: 175px;
    text-align: center;
  }
</style>